
<!--
 * @Description:抽屉
 * @Version: 2.0
 * @Author: zhao
 * @Date: 2022-06-17 14:31:07
 * @LastEditors: zhao
 * @LastEditTime: 2022-07-04 10:37:35
-->
<template>
    <div class="drawer">
        <!-- name="fade" -->

        <div :style="{ left: drawerHide_left + 'px' }" class="dra">
            <div class="dra_cont">
                <drawerleft @setRightHide="setRightHide" />
            </div>

            <div class="cela_left">
                <img src="@/assets/cela_right.png" alt="" @click="handleClose('left')" />
            </div>
        </div>

        <div :style="{ right: drawerHide_right + 'px' }" class="dra">
            <div class="buttonGroup">
                <buttonGroup />
            </div>
            <div class="cela_left">
                <img src="@/assets/cela_left.png" alt="" @click="handleClose('right')" />
            </div>
            <div class="dra_cont">
                <drarweright />
            </div>
        </div>
    </div>
</template>

<script>
import buttonGroup from "./button_group.vue"
import drawerleft from "./search/left.vue"
import drarweright from "./search/right.vue"
export default {
    components: { buttonGroup, drawerleft, drarweright },
    props: {
        drawer_config: {
            type: Object,
            default: () => {
                return { direction: "left", open: false, right_open: false }
            },
        },
        butmap: Object,
    },
    data() {
        return {
            drawerHide_right: "-345",
            drawerHide_left: "-345",
            map: null,
        }
    },
    watch: {
        butmap(val) {
            this.map = val
        },
        "$store.state.map.mapList": {
            handler: function (val, oldVal) {
                if (val && val.length > 0) {
                    this.drawerHide_right = "0"
                }
            },
            immediate: true,
            deep: true,
        },
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            let router = this.$route.name
            if (router == "SpatialRetrieval") {
                if (this.$store.state.map.mapList.length > 0) {
                    if (this.drawer_config.right_open) this.drawerHide_right = "0"
                } else {
                    if (!this.drawer_config.right_open) this.drawerHide_right = "-345"
                }
                if (this.drawer_config.open) this.drawerHide_left = "0"
            } else {
                if (this.drawer_config.right_open) this.drawerHide_right = "0"
                if (!this.drawer_config.right_open) this.drawerHide_right = "-345"
                if (!this.drawer_config.open) this.drawerHide_left = "-345"
                if (this.drawer_config.open) this.drawerHide_left = "0"
            }
        },
        handleClose(done) {
            if (done == "right") {
                if (this.drawerHide_right === 0) {
                    this.drawerHide_right = -345
                } else {
                    this.drawerHide_right = 0
                }
            }
            if (done == "left") {
                if (this.drawerHide_left === 0) {
                    this.drawerHide_left = -345
                } else {
                    this.drawerHide_left = 0
                }
            }
        },
        setRightHide(val) {
            this.drawerHide_right = val
            this.$forceUpdate()
        },
    },
}
</script>

<style   lang="scss">
.drawer {
    .dra {
        width: 500px;
        height: 100%;
        position: absolute;
        top: 0;
        display: flex;
        justify-items: center;
        transition: all 0.5s linear 0s;
        z-index: 900;
    }

    .dra_cont {
        width: 100%;
        height: 100%;
        border: 1px solid #dddfe4;
        border-radius: 5px;
        background: white;
    }

    .buttonGroup {
        position: absolute;
        left: -190px;
        top: 10px;
        z-index: 200;
    }
}

.cela_left {
    display: flex;
    align-items: center;
    width: 30px;
    height: 100%;

    img {
        width: 30px;
        height: 70px;
    }
}
</style>
